<template>
	<view>
		<z-paging ref="paging" v-model="goodsList" @query="getPage" :auto="false">
			<cu-custom slot="top" :isBack="true" :bgColor="'bg-'+ theme.themeColor">
				<block slot="backText">返回</block>
				<block slot="content">商品列表</block>
			</cu-custom>
			<view slot="top" class="cu-bar search" :class="'bg-'+ theme.themeColor">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="输入搜索的关键词" confirm-type="search" v-model="searchKeyword"></input>
				</view>
				<view class="action">
					<button class="cu-btn shadow-blur round" :class="'bg-'+ theme.matchColor"
						@tap="doSearch">搜索</button>
				</view>
			</view>
			<view>
				<goods-list :goodsList="goodsList"></goods-list>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import GoodsList from "components/goods-list/col-list/index";
	import {
		getPage as goodsSpuPage
	} from '@/api/goodsspu.js';
	export default {
		components: {
			GoodsList
		},
		data() {
			return {
				theme: getApp().globalData.theme,
				goodsList: [],
				searchKeyword: '',
				categorySecondId: '',
				isLoad: true,
				couponId: ''
			}
		},
		onLoad(option) {
			if (option.categorySecondId) {
				this.categorySecondId = option.categorySecondId;
			}

			if (option.couponId) {
				this.couponId = option.couponId;
			}
			this.$nextTick(function() {
				this.$refs.paging.reload();
			})
		},
		methods: {
			/**
			 * 分页查询
			 */
			getPage(pageNo, pageSize) {
				goodsSpuPage({
					current: pageNo,
					size: pageSize,
					descs: 'sales_volume',
					name: this.searchKeyword,
					categorySecondId: this.categorySecondId
				}).then(res => {
					this.$refs.paging.complete(res.data.records);
				});
			},
			/**
			 * 关键字搜索
			 */
			doSearch() {
				this.$refs.paging.reload();
			}

		}
	}
</script>

<style>

</style>
